<!--
 * @Author: zhangchaosen
 * @Date: 2024-06-14 17:25:29
 * @LastEditors: zhangchaosen
 * @LastEditTime: 2024-06-17 11:16:14
 * @Description: 我的考试
-->
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'MyExamList'
})

type ExamItemType = {
  id: number
  name: string
  icon: string
  startTime: string
  endTime: string
  color: string
}

const router = useRouter()

const examList = ref<ExamItemType[]>([
  {
    id: 1,
    name: '2024 体测考试',
    icon: '',
    startTime: '2024-05-10',
    endTime: '2024-05-18',
    color: '#ff9c6e'
  },
  {
    id: 1,
    name: '2024 体测考试',
    icon: '',
    startTime: '2024-05-10',
    endTime: '2024-05-18',
    color: '#ff9c6e'
  }
])

/**
 * 考试列表点击
 * @param item
 */
const onCardClick = (item: ExamItemType) => {
  console.log(item)
  router.push({ path: `/examinee-info`, query: { id: item.id } })
}
</script>
<template>
  <div class="page-container">
    <div class="page-content flex justify-around items-center flex-wrap">
      <div v-for="item in examList" :key="item.id" class="card-wrap">
        <el-card shadow="hover" class="card-item h-full cursor-pointer flex items-center justify-center" @click="onCardClick(item)">
          <div class="name">{{ item.name }}</div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-content {
  width: 80%;
  height: 100%;
  margin: 0 auto;

  .card-wrap {
    width: 450px;
    height: 300px;
  }

  .card-item {
    .name {
      font-size: 36px;
    }
  }
}
</style>
